<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8" />
		<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta name="description" content="意休，意在通过高效实践来获得更多休息，是一个个人高效学习及前端实践的记录网站。" />
		<meta name="keywords" content="意休,高效学习,如何学习,自我检录, 前端学习" />
		<title>意休 | 你的高效之友</title>
		<link rel="icon" href="images/baobao.png" type="image/png">
		<link rel="bookmark" href="images/baobao.png" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" href="css/othersize.css" />
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<!-- <script src="js/jquery-1.11.3.min.js"></script> -->
		<style>
			@keyframes typing {
				from { width: 0 }
			}
			
			@keyframes caret {
				1%{ border-right-color: pink;}
				50% { border-right-color: transparent; }
			}
			
			.typeBox{
				width: 320px;
				height: 196px;
				background-color: rgba(33,33,33,0.6);
				position: absolute;
				left:60px;
				top:60px;
				border-radius: 30px;
				padding:30px;
				border:1px solid pink;
				box-shadow: 0 0 8px 0 #ff5898;
			}
			
			.typeWords{
				font: bold 200% Consolas, Monaco, monospace;
				white-space: nowrap;
				max-width: 100%;
				overflow: hidden;
				color: white;
			}
			.animaFir{
				border-right: pink .05em solid;
				width:13ch;
				animation: typing 5s steps(13),
								caret 1s steps(1) infinite;
				
			}
			.animaSec{
				border-right: pink .05em solid;
				width:27ch;
				animation: typing 10s 6s steps(27),
								caret 1s 6s steps(1) infinite;
			}
			.animaThir{
				border-right: transparent .05em solid;
				width:24ch;
				animation: typing 10s 17s steps(24),
								caret 1s 17s steps(1) infinite;
			}
			.typeBox .towork{
				position: absolute;
				bottom: 14px;
				right: 26px;
				padding:5px 12px;
				border-radius: 12px;
				color: white;
				display: block;
				background-color: #ff6aad;
				font-weight:700 ;
				text-align: center;
			}
			.typeWords.first{
				margin: 18px 0px;
				font-size: 32px;
			}
			.typeWords.next{
				margin-bottom: 6px;
				font-size: 18px;
			}
		</style>

		<style>
      
			.toGithub{
				position: absolute;
				z-index: 9;
				top:0;
				right: 0;
				color: #fff;
				fill: #ff7ec7;
				height: 80px;
				width: 80px;
			}
      .toblog{
        position: absolute;
        z-index: 9;
        top: 14px;
        left:14px;
        text-align: center;
        line-height: 20px;
        font-size: 16px;
        font-weight: 700;
        color: #ff7ec7;
        background-color: #ff7ec7;
        border-radius: 50%;
        border: 2px solid #ff7ec7;
        height: 20px;
        width: 20px;
        transition: .5s;
        /* transform: rotate(45deg); */
      }
      .toblog:hover{
        line-height: 30px;
        height: 30px;
        width: 30px;
        background-color: transparent;
      }
      
			.toGithub .yx-arm{
				transform-origin: 130px 106px;
			}
			.yx-corner:hover .yx-arm{
				-webkit-animation: shakeit .8s ease-in;
				animation: shakeit .8s ease-in;
			}
			@keyframes shakeit{
				0%, 100% {
				    transform: rotate(0);
				}
				20%, 60% {
				    transform: rotate(-25deg);
				}
				40%, 80% {
				    transform: rotate(10deg);
				}
			}
      
      
		</style>
	</head>
	<body>

		<!--头部区域-->
		<header class="header">
			<div class="hd">
				<h1><a href="./index.html" class="logo">意休</a></h1>
				<div class="sousuokuang">
					<form action="https://www.baidu.com/s" target="_blank" rel="noopener" >
						<input class="kuang" type="text" name="wd" placeholder="搜索技能、应用、话题..." autocomplete="off" />
						<input class="search" type="image" src="images/sousuo.png" alt="搜索"/>
					</form>
					<span class="tishiwenben">+增加必备关键字 -排除关键字 双引号来限定整词 site intitle inurl filetype</span>
				</div>
				<nav class="nav">
					<ul>
						<li><a href="./index.html"><i style="color: #ff557f;">Home</i><b>首页</b></a></li>
						<li><a href="./works.html"><i>Works</i><b>个人作品</b></a></li>
						<li><a href="./share.html"><i>Share</i><b>资源分享</b></a></li>
						<li><a href="./play.html"><i>Play</i><b>玩一玩</b></a></li>
					</ul>
				</nav>
			</div>
		</header>


		<!--海报区域-->
		<section class="banner">
			<a class="yx-corner" href="https://github.com/doyouho/doyouho.github.io/" target="_blank" rel="noopener"  title="点击查看Github库" rel="noopener">
				<svg class="toGithub" viewBox="0 0 250 250" aria-hidden="true">

					<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
					<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
					 fill="currentColor" style="transform-origin: 130px 106px;" class="yx-arm"></path>
					<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
					 fill="currentColor" class="yx-body"></path>
				</svg>

			</a>
			<div class="btn btn1">&lt;</div>
			<div class="btn btn2">&gt;</div>
			<dl></dl>

			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>

			<div class="typeBox">
        <a class="toblog" href="https://kathy_candy.gitee.io/blog/#/" target="_blank" rel="noopener"  title="点击进入博客" rel="noopener">博</a>
				<h2 class="typeWords animaFir first">Welcome guys!</h2>
				<br />
				<h3 class="typeWords animaSec next"></h3>
				<h3 class="typeWords animaThir next"></h3>
				<a class="towork" href="./towork.html">开始工作</a>
			</div>
			<script>
				// 打字效果的实现
				var typeWords = document.getElementsByClassName("typeWords");
				var dakaListStr = localStorage.getItem("saveData");
				var dakaDays = 0;
				if (dakaListStr) {
					var dakaObj = JSON.parse(dakaListStr);
					for (let dakaItem in dakaObj) {
						dakaDays = dakaDays + (dakaObj[dakaItem] * 1);
					}
				}

				setTimeout(function() {
					typeWords[0].classList.remove("animaFir");
					typeWords[1].innerText = "Let's make great work here!";
				}, 6000);

				setTimeout(function() {
					let dakaStr = "0";
					if (dakaDays < 10) {
						dakaStr = "0" + dakaDays;
					}
					typeWords[1].classList.remove("animaSec");
					typeWords[2].innerText = "You have learnt " + dakaStr + " days.";
				}, 17000);
			</script>

		</section>

    
		<!--美句区域   修改文字！！-->
		<section class="words">
			<div class="word_title title"><i class="jiantou"></i>
				<h3>励志一下</h3>
			</div>
		</section>

		<!--更新区域、更新日期/修改链接和文字-->
		<section class="new">
			<div class="new_title title"><i class="jiantou"></i>
				<h3>最新内容</h3><span>更新日期：2021.03.06</span>
			</div>

			<div class="new_con model_con">
				<a class="box box1" href="./play.html">
					<div class="box_kuang kuang1"><b>&gt;&gt;&nbsp;&nbsp;play&nbsp;&nbsp;&lt;&lt;</b>
						<h2>看看世界</h2>
						<p>介绍：小阶段的休息项目，也可以温故知识。</p>
					</div>
				</a>
				<a class="box box2" href="./share.html">
					<div class="box_kuang kuang2"><b>&gt;&gt;&nbsp;&nbsp;share&nbsp;&nbsp;&lt;&lt;</b>
						<h2>必先利其器</h2>
						<p>各种网站和软件的分享，是个资源库没错啦。</p>
					</div>
				</a>
				<a class="box box3" href="./heal.html">
					<div class="box_kuang kuang3"><b>&gt;&gt;&nbsp;&nbsp;heal&nbsp;&nbsp;&lt;&lt;</b>
						<h2>如何做自己</h2>
						<p>迷茫，失落，烦躁，不过是因为不明确，认清眼前，认清自己，开始出发。</p>
					</div>
				</a>

				<a class="box box4" href="./fiction.html">
					<div class="box_kuang kuang4"><b>&gt;&gt;&nbsp;&nbsp;fiction&nbsp;&nbsp;&lt;&lt;</b>
						<h2>《伪大神的成名之路》</h2>
						<p>映射前端学习：讲述顾夕一个人如何带领人闯江湖。（更新第一章）</p>
					</div>
				</a>
			</div>
		</section>



		<footer class="footer">
			&nbsp;<h1>意休，让生活更高效一点</h1>&nbsp;&nbsp;&nbsp;<a href="about.html" rel="noopener" target="_blank">关于我 | 网站帮助</a>
		</footer>

		<script>
			$(function() {
				// 用js配合jquery的ajax来访问文件数据
				$.ajax({
					url: "./data/sentence.json",
					dataType: "json",
					success: function(res) {
						var arr = res["index"];
						var len = arr.length;
						while (len) {
							var num = Math.ceil(Math.random() * 10) - 1;
							if (num < len) {
								var sentence = "<p>" + arr[num] + "</p>";
								$(".words").append(sentence);
								return 0;
							}
						}
					}
				});


				// 初始化
				var i = 0;
				var size = $(".banner li").length;

				// 中英文切换导航条动画
				$(".hd .nav li").hover(function() {
					$(this).find("a").stop().animate({
						top: -66
					})
				}, function() {
					$(this).find("a").stop().animate({
						top: 0
					})
				})

				//图片加载
				for (let n = 1; n < 5; n++) {
					let n_url = "url(images/new/" + n + ".jpg)";
					$(".new_con .box").eq(n - 1).css("background-image", n_url);
				}
				for (let j = 0; j < size; j++) {
					$("dl").append("<dd></dd>");
					let j_url = "url(images/pic" + (j + 1) + ".jpg)";
					$(".banner li").eq(j - 1).css("background-image", j_url);
				}
				$(".banner li").eq(0).show();
				$(".banner dd").eq(0).addClass("active");

				//手动控制轮播
				$(".banner dd").mouseover(function() {
					$(this).addClass("active").siblings().removeClass("active");
					var idx = $(this).index();
					i = idx;
					$(".banner li").eq(idx).fadeIn().siblings().fadeOut();
				})

				//自动轮播器 setInterval  setTimeout
				var t = setInterval(move, 3000);
				//鼠标滑到轮播器，自动停掉动画
				$(".banner").hover(function() {
					clearInterval(t);
				}, function() {
					t = setInterval(move, 5000);
				})

				//向右运动动画函数
				function move() {
					i++;
					if (i >= size) {
						i = 0;
					}
					$(".banner li").eq(i).fadeIn().siblings().fadeOut();
					$(".banner dd").eq(i).addClass("active").siblings().removeClass("active");
				}
				//向左运动动画函数
				function move_left() {
					i--;
					if (i < 0) {
						i = size - 1;
					}
					$(".banner li").eq(i).fadeIn().siblings().fadeOut();
					$(".banner dd").eq(i).addClass("active").siblings().removeClass("active");
				}

				$(".banner .btn1").click(function() {
					move_left();
				})
				$(".banner .btn2").click(function() {
					move();
				})
			})
		</script>

	</body>
</html>
